<template>
	<view>
		<nav-bar title="视角选择">
		</nav-bar>

		<scroll-view class="viewport-scrollview" :scroll-y="true">

			<uni-grid :column="1" :show-border="false" :square="false" @change="onViewPortClick">
				<uni-grid-item v-for="(item,index) in viewProtDataList" :key="index" :index="index">
					<view class="viewport-item">
						<image class="viewport-item-img" mode="aspectFill" :src="item.ImgPath"></image>
						<text class="viewport-item-text">{{item.VName}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</scroll-view>
	</view>
</template>

<script>
	import uniGrid from "@/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid-item/uni-grid-item.vue"
	import CONSTS from '@/common/biz/consts.js'
	
	import {
		GetViewManageList,
	} from '@/services/index.js';
	export default {
		components: {
			uniGrid,
			uniGridItem,
		},
		
		data() {
			return {
				viewProtDataList: []
			};
		},
		
		methods:{
			requireViewManageList() {
				var params = {
					MileageID: CONSTS.DEFAULT_MODEL_ID,
				};
			
				GetViewManageList(params).then((res) => {
					if (res.code == '000000') {
						// debugger
						this.viewProtDataList = res.data;
					} else {
						uni.showToast({
							title: res.msg
						})
					}
					uni.hideLoading();
				});
			},
			
			onViewPortClick(item) {
				let tempViewPortData = this.viewProtDataList[item.detail.index];
				this.backToScene({
						position: tempViewPortData.Position,
					});
			},
			
			backToScene(data) {
				uni.$emit('viewport-change', data);
				uni.navigateBack({
					delta: 1
				})
			},
		},
		
		onLoad() {
			this.requireViewManageList();
		}
		
	}
</script>

<style lang="scss" scoped>
.viewport-scrollview {
			height: 100%;
			
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			padding: 0;
			font-size: 14px;
			background-color: #ffffff;
		
			.viewport-item {
				flex: 1;
				/* position: relative;
		 */
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 15upx;
				// height: 150upx;
		
		
				.viewport-item-img {
					background-color: #007AFF;
					// width: calc(100% - 20upx);
					width: 100%;
					height: 350rpx;
				}

				.viewport-item-text {
					font-size: 28upx;
				}
			}
		}
</style>
